var lists = ["学习HTML", "学习 Css3", "学习JavaScript"];
//创建for 循环
function d() {
    document.querySelector('ul').innerHTML = ''
    
    for (let i = 0; i < lists.length; i++) {
        //创建li标签
        var li = document.createElement('li');
        li.classList.add('list-group-item');
        li.classList.add('d-flex');
        li.classList.add('justify-content-between');
        li.classList.add('align-items-center');
        //创建span标签
        var span = document.createElement('span');
        var spanText = document.createTextNode(lists[i]);
        //把文本内容追加到span标签里面
        span.appendChild(spanText);
        //console.log(span);


        // span.addEventListener('dblclick', function () {
        //     console.log(this)
        //     this.setAttribute('contenteditable', true)
        // })


        //创建button标签
        var button = document.createElement('button');
        button.type = 'button';
        button.classList.add('close');
        button.innerHTML = '&times;';

        //给删除按钮创建一个点击事件
        button.addEventListener('click', function () {
            console.log(i)
            //删除一条指定数据
            lists.splice(i, 1)
            //把数组展示到前台
            //把lists数组的数据，显示到前台
            d()
        })

        li.appendChild(span);
        li.appendChild(button);
        console.log(li);

        var ul = document.querySelector('#ul')
        //后追加前的里面
        ul.appendChild(li)
    }
}


d()

var ipt = document.querySelector('#ipt')
var btn = document.querySelector('#btn')

btn.addEventListener('click', function () {
    //把表单的数据放进数组
    if (ipt.value != '') {
        lists.push(ipt.value)
    }else {
        alert("不可以为空")
    }
    //把list数组的数据，显示到前台
    d()
})